<template>
  <div class="app-container">
    <div class="org-container">
      <!-- 左侧组织树 -->
      <div class="org-tree">
        <div class="tree-header">
          <span>组织架构</span>
          <div class="tree-actions">
            <el-button type="text" icon="el-icon-plus" @click="handleAddNode">新增</el-button>
            <el-button type="text" icon="el-icon-refresh" @click="refreshTree">刷新</el-button>
          </div>
        </div>
        <el-tree
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          highlight-current
          draggable
          @node-click="handleNodeClick"
          @node-drag-end="handleDragEnd"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span class="node-actions">
              <el-button
                type="text"
                size="mini"
                @click.stop="() => handleAddChild(data)"
              >
                添加
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click.stop="() => handleEdit(data)"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click.stop="() => handleDelete(node, data)"
              >
                删除
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>

      <!-- 右侧详情 -->
      <div class="org-detail" v-if="currentNode">
        <el-card>
          <div slot="header">
            <span>{{ currentNode.label }}详细信息</span>
          </div>
          <el-form :model="currentNode" label-width="100px">
            <el-form-item label="组织名称">
              <span>{{ currentNode.label }}</span>
            </el-form-item>
            <el-form-item label="组织类型">
              <span>{{ currentNode.type }}</span>
            </el-form-item>
            <el-form-item label="成立时间">
              <span>{{ currentNode.createTime }}</span>
            </el-form-item>
            <el-form-item label="负责人">
              <span>{{ currentNode.leader }}</span>
            </el-form-item>
            <el-form-item label="学生人数">
              <span>{{ currentNode.memberCount }}人</span>
            </el-form-item>
            <el-form-item label="联系方式">
              <span>{{ currentNode.contact }}</span>
            </el-form-item>
            <el-form-item label="简介">
              <span>{{ currentNode.description }}</span>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>

    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="组织名称" prop="label">
          <el-input v-model="formData.label" placeholder="请输入组织名称"/>
        </el-form-item>
        <el-form-item label="组织类型" prop="type">
          <el-select v-model="formData.type" placeholder="请选择组织类型">
            <el-option label="党委" value="党委"/>
            <el-option label="党总支" value="党总支"/>
            <el-option label="党支部" value="党支部"/>
            <el-option label="党小组" value="党小组"/>
          </el-select>
        </el-form-item>
        <el-form-item label="成立时间" prop="createTime">
          <el-date-picker
            v-model="formData.createTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          <el-input v-model="formData.leader" placeholder="请输入负责人姓名"/>
        </el-form-item>
        <el-form-item label="联系方式" prop="contact">
          <el-input v-model="formData.contact" placeholder="请输入联系方式"/>
        </el-form-item>
        <el-form-item label="简介" prop="description">
          <el-input
            type="textarea"
            v-model="formData.description"
            :rows="3"
            placeholder="请输入组织简介"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PartyOrgTree',
  data() {
    return {
      treeData: [{
        id: 1,
        label: '机关党委',
        type: '党委',
        createTime: '2020-01-01',
        leader: '张三',
        memberCount: 120,
        contact: '13800138000',
        description: '机关党委负责全面工作',
        children: [{
          id: 2,
          label: '行政党总支',
          type: '党总支',
          createTime: '2020-02-01',
          leader: '李四',
          memberCount: 45,
          contact: '13900139000',
          description: '行政部门党总支',
          children: [{
            id: 3,
            label: '办公室党支部',
            type: '党支部',
            createTime: '2020-03-01',
            leader: '王五',
            memberCount: 15,
            contact: '13700137000',
            description: '办公室党支部'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      currentNode: null,
      dialogVisible: false,
      dialogTitle: '',
      dialogType: '', // add, addChild, edit
      parentNode: null,
      formData: {
        label: '',
        type: '',
        createTime: '',
        leader: '',
        contact: '',
        description: ''
      },
      rules: {
        label: [{ required: true, message: '请输入组织名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择组织类型', trigger: 'change' }],
        createTime: [{ required: true, message: '请选择成立时间', trigger: 'change' }],
        leader: [{ required: true, message: '请输入负责人姓名', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      this.currentNode = data
    },
    handleAddNode() {
      this.dialogType = 'add'
      this.dialogTitle = '新增组织'
      this.formData = {
        label: '',
        type: '',
        createTime: '',
        leader: '',
        contact: '',
        description: ''
      }
      this.parentNode = null
      this.dialogVisible = true
    },
    handleAddChild(data) {
      this.dialogType = 'addChild'
      this.dialogTitle = '新增下级组织'
      this.formData = {
        label: '',
        type: '',
        createTime: '',
        leader: '',
        contact: '',
        description: ''
      }
      this.parentNode = data
      this.dialogVisible = true
    },
    handleEdit(data) {
      this.dialogType = 'edit'
      this.dialogTitle = '编辑组织'
      this.formData = { ...data }
      this.currentNode = data
      this.dialogVisible = true
    },
    handleDelete(node, data) {
      this.$confirm('确认删除该组织及其下级组织吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const parent = node.parent
        const children = parent.data.children || parent.data
        const index = children.findIndex(d => d.id === data.id)
        children.splice(index, 1)
        this.$message.success('删除成功')
        if (this.currentNode && this.currentNode.id === data.id) {
          this.currentNode = null
        }
      })
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      // dropType: 'inner', 'before', 'after'
      this.$message.success('组织架构调整成功')
    },
    saveData() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const newNode = {
            ...this.formData,
            id: this.dialogType === 'edit' ? this.formData.id : Date.now(),
            memberCount: this.dialogType === 'edit' ? this.formData.memberCount : 0,
            children: this.dialogType === 'edit' ? this.formData.children : []
          }

          if (this.dialogType === 'add') {
            this.treeData.push(newNode)
          } else if (this.dialogType === 'addChild') {
            if (!this.parentNode.children) {
              this.$set(this.parentNode, 'children', [])
            }
            this.parentNode.children.push(newNode)
          } else if (this.dialogType === 'edit') {
            Object.assign(this.currentNode, newNode)
          }

          this.dialogVisible = false
          this.$message.success(this.dialogType === 'edit' ? '更新成功' : '新增成功')
        }
      })
    },
    refreshTree() {
      // 模拟刷新
      this.$message.success('刷新成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.org-container {
  display: flex;
  height: calc(100vh - 120px);
  
  .org-tree {
    width: 300px;
    border-right: 1px solid #EBEEF5;
    padding: 20px;
    
    .tree-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      span {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  
  .org-detail {
    flex: 1;
    padding: 20px;
    
    .el-card {
      height: 100%;
    }
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  
  .node-actions {
    opacity: 0;
    transition: opacity 0.2s;
  }
  
  &:hover .node-actions {
    opacity: 1;
  }
}

::v-deep .el-tree-node__content {
  height: 32px;
}

::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background-color: #ecf5ff;
}
</style> 